<template>
	<view>
		<navbar :bgColor="bgColor" :btnColors='btnColor' title="申请售后" :isGoBack="true" :isNotice="true" :visible="true"></navbar>

		<view class="flex flex-direction" style="padding-bottom: 20rpx;">		
			<view class="order-info" v-for="(item,index) in order_list.goods" :key="index">
				<view class="order-info-prod mt-15 flex ">
					<view class="flex mt-20">
					   <image :src="item.goods_logo"  style="height: 160rpx;width: 160rpx;"></image>	
					</view>		     
					<view class="flex ml-20 flex-direction" style="width: 80%;">
						<view class="order-info-prod-right-name">{{item.goods_title}}</view>
						<view class="order-info-prod-right-size">{{item.goods_spec}}</view>
						<view class="order-price align-center text-center">
						  <view class="flex align-center text-center">
							<text class="selling_price" style="font-size: 28rpx;">￥</text>
							<text class="selling_price">{{item.selling_price}}</text>
						  </view>
						  <text class="order-number">x {{item.number}}</text>
						</view>
					</view>				
				</view>		   
			</view>		  
	    </view>
		<view class="order-infos justify-between flex flex-direction" >
			<text>售后类型</text>
			<text>退款</text>
		</view>
		
		<view class="order-apply mt-20">
			<text style="font-weight: 500;font-size: 32rpx;color: #222222;">原因</text>
			<view class="flex mt-10">
				 <textarea @input="setMessage"    placeholder-class="message-placeholder" maxlength="100" placeholder="请输入"  style="background: #F0F9FE;width: 654rpx;padding-top: 20rpx;padding-left: 15rpx;"/>
			</view>
			<view class="flex mt-15" style="padding-bottom: 180rpx;">
				 <u-upload :fileList="images" @afterRead="afterRead" :previewFullImage="true" @delete="deleteImg"  multiple :maxCount="4"></u-upload>
			</view>			
			 
		</view>
		
		
		
		
		<view class="about-button" style="background-color: #ffffff">
			<view class="ml-15">				
				<button class="about-button-alipay" style="background:#36B3E9;border: none;color: #ffffff;height: 88rpx;text-align: center;line-height: 88rpx;" @click="submit">					
					<view class=" ml-10">
						提交
					</view>
				</button>
			</view>			
		</view>
		
		
	</view>
</template>
<script>
	import config from '@/utils/config.js';
	export default {
		data(){
			return {
				orderId:'',
				order_list:[],
				star1:5,
				star2:5,
				star3:5,
				...getApp().globalData.config,
				back_content:'',
				images:[]
			}
		},
		onLoad(options) {		
		    if(options.orderId){
		      this.orderId=options.orderId
		    }		
		    let that=this     
		      let obj_data={
		        token:uni.getStorageSync('userInfo').app_openid,
		        login_type:'app',
		        order_id:this.orderId
		      }      
		      this.$http.orderInfo(obj_data).then(res=>{
		        let evaluate_info=[]
		        if(res.resCode=="9999"){
		          for (let j = 0; j < res.data.goods.length; j++) {					  
					res.data.goods[j].star1=5
					res.data.goods[j].star2=5
					res.data.goods[j].star3=5	
					res.data.goods[j].remark=''
					res.data.goods[j].image=[]
		          }
		          that.order_list=res.data
		        }else{
		          uni.showToast({title:res.resMessage,icon:"none"})
		        }
		      }) 
		},
		methods:{
			...getApp().globalData.function,
			submit(){
				let that = this
				
				
				if(!this.back_content){
				  this.$showToast('请填写退款信息！')
				  return
				}
				let obj_data={
					token:uni.getStorageSync('userInfo').token,
					orderId:this.orderId,
					back_content:this.back_content,
					images:this.images
				}
				this.$http.applyOrder(obj_data).then(res=>{
				  this.$showToast(res.resMessage) 
				  setTimeout(()=>{
					uni.switchTab({
					  url: '/pages/order/index'
					})       
				  },3000)  
				})
					
					
					
			},
			setMessage(event){
				let that = this
				let orderId=event.currentTarget.dataset.orderId
				this.back_content =event.target.value				
				
			},
			afterRead(event) {
				
				let that = this
				let lists = [].concat(event.file)					
				lists.map((item,index1) => {
					that.images.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})	
					this.uploadImg(item.url)													
				})	
									
					
			    			    
			},
			
			uploadImg(fileURL) {
			    var that = this
			    //上传文件
			    const filePath = fileURL // 小程序临时文件路径
			    wx.uploadFile({
			      url: config.api_url+'/api/index/uploadImage',
			      filePath: filePath,
			      name: 'file',
			      header: {
			        "Content-Type": "multipart/form-data",
			      },
			      formData: { 
			        fileType:'image',
			        reName:'true',
			        thumbnail:'true'
			      },
			      success(res) {
			      var tem = JSON.parse(res.data)
			      // 上传完成需要更新 fileList
				  
				  
				  
				  
				    let images=that.images		
					images.forEach(item => {
						item.status="success"
						item.image=tem.data.image
					})
			        that.images=images   
			        uni.showToast({ title: '上传成功', icon: 'none' })
				  
			      },
			      fail: function (res) {
			        console.log("file upload fail")
			      },
			    })
			},
			
			
			
			deleteImg(event) {
				var that = this
				const order_goods_id = event.name
				const fileListIndex = event.index
				
				for(var index=0;index<that.order_list.goods.length;index++){
				    if(that.order_list.goods[index].order_goods_id==order_goods_id){
				        that.order_list.goods[index].image.splice(0, 1)
					}
				}						         
			}
		}

	}
</script>

<style>
	

	
	/* pagesOrder/evaluate/index.wxss */
	
	/* pages/prod-comm/prod-comm.wxss */
	page{
	  background-color: whitesmoke;
	}
	.order-price{
		display: flex;
		justify-content: space-between;
		margin-right: 15rpx;
		margin-top: 15rpx;
	}
	.order-apply{
		display: flex;
		flex-direction: column;
		/* width: 89%; */
		background-color: white;
		border-radius: 8px;
		margin: 0px 10px;
		padding: 13px;
		font-weight: 400;
		font-size: 32rpx;
		color: #222222;
	}
	.order-infos{
		display: flex;
		flex-direction: row;
		/* width: 89%; */
		background-color: white;
		border-radius: 8px;
		margin: 0px 10px;
		padding: 13px;
		font-weight: 400;
		font-size: 32rpx;
		color: #222222;
	}
	
	.order-info{
		display: flex;
		flex-direction: column;
		/* width: 89%; */
		background-color: white;
		border-radius: 8px;
		margin: 0px 10px;
		padding: 10px;
	}
	.selling_price{
		font-weight: bold;
		font-size: 40rpx;
		color: #FF2E00;
	}
	.order-info-prod image{
	  margin-top: -20px;
	  width: 60px;
	  height: 80px;
	}
	.order-info-prod .order-info-prod-right{
	  margin-left: 70px;
	  margin-top: -60px;
	}
	
   .order-info-prod-right-name {
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  font-weight: 600;
	  font-size: 32rpx;
	  color: #222222;
	}
	
	.order-info-prod-right-size{
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  font-size: 24rpx;
	  color: #888888;
	  margin-top: 15rpx;
	}
	
	.order-info .showImages{
	  margin-top: 10px;
	}
	
	.order-info .showImages textarea{
	  width: 98%;
	}
	.message-placeholder{
	  font-size: 13px;
	  color: darkgray;
	  padding-top: 15rpx;
	  margin-top: 15rpx;
	}
	
	.showImages-label{
	  font-size: 12px;
	  margin-top: -17px;
	  margin-left: 70px;
	  color: darkgray;
	  width: 160px;
	}
	
	.publish{
	  padding-top: 10px;
	}
	.publishBtn{
	  float: right;
	  margin-top: -26px;
	  background-color: #ff3333;
	  color: white;
	  width: 65px;
	  line-height: 30px;
	  text-align: center;
	  border-radius: 5px;
	}
	
	.order-info-star{
	  padding-top: 10px;
	}
	.order-info-star-1{
	  padding-top: 1px;
	}
	
	.order-info-star .order-info-star-star{
	  margin-top: -21px;
	  margin-left: 70px;
	}
	
.about-button{		
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		padding-bottom: 40rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: #FFFFFF;
		 border: none !important;
	}
	
	.about-button-alipay{
		display: flex;
		justify-content: center;
		width: 620rpx;
		font-size: 28rpx;
		color: #031F37;
		border: none !important;
		border-radius: 40rpx;
		
	}
	
	button::after {
	    border: none;
	}
	
	.about-button:active{
	  opacity: 0.5;
	}

</style>